<template>
  <div>
    <el-row :gutter="11">
      <p class="home">首页</p>
    </el-row>
      <div class="home-echarts">
         <!-- 折线图 -->
         <div class="echarts" ref="echartsEle1"></div>
         <!-- 饼图 -->
         <div class="echarts" ref="echartsEle2"></div>
         <!-- 潮汐图 -->
          <div class="echarts" ref="echartsEle3"></div>
         <!-- 散点图 -->
            <div class="echarts" ref="echartsEle4"></div>
      </div>
    
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, reactive } from "vue";
//折线图
const echartsEle1 = ref();
const option1 = reactive({
  title: {
    text: "学生项目发布数量",
  },
  tooltip: {},
  legend: {
    data: ["个数"],
  },
  xAxis: {
    data: ["小李", "王五", "张三", "李四", "赵六", "小七"],
  },
  yAxis: {},
  series: [
    {
      name: "个数",
      type: "line",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
});
const initEcharts1 = () => {
  var myEchart = echarts.init(echartsEle1.value);
  //   console.log(myChart);
  myEchart.setOption(option1);
};
// 饼图
const echartsEle2 = ref();
const option2 = reactive({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '人员比例分析',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 70, name: '学员' },
        { value: 10, name: '班主任' },
        { value: 15, name: '讲师' },
        { value: 4, name: '管理员' },
        { value: 1, name: '校长' }
      ]
    }
  ]
})

const initEcharts2 = () => {
  var myEchart = echarts.init(echartsEle2.value);
  //   console.log(myChart);
  myEchart.setOption(option2);
};
// 潮汐图
const echartsEle3 = ref();
const option3 = reactive({
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
    text: 'Gradient Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Line 1',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: 'Line 2',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
      name: 'Line 3',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)'
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 132, 201, 334, 190, 130, 220]
    },
    {
      name: 'Line 4',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 402, 231, 134, 190, 230, 120]
    },
    {
      name: 'Line 5',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)'
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 302, 181, 234, 210, 290, 150]
    }
  ]
})
const initEcharts3 = () => {
  var myEchart = echarts.init(echartsEle3.value);
  //   console.log(myChart);
  myEchart.setOption(option3);
};
// 散点图
const echartsEle4 = ref();
const option4 = reactive({
  title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
})
const initEcharts4 = () => {
  var myEchart = echarts.init(echartsEle4.value);
  //   console.log(myChart);
  myEchart.setOption(option4);
};
onMounted(() => {
  initEcharts1();
  initEcharts2();
  initEcharts3();
  initEcharts4();
});
</script>

<style lang="scss" scoped>
.home {
  color: #f49;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
}
.home-echarts{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.echarts {
  padding-top: 20px;
  width: 45%;
  height: 300px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
